<template>
  <div v-if="show">
    <n-card :bordered="false">
      <i class="el-icon-s-tools"></i>
      <span class="system-info-title">系统：</span>{{ systemInfo.os }}
      <span class="system-info-title">IP：</span>{{ systemInfo.ip }}
      <span class="system-info-title">项目已正常运行：</span>{{ systemInfo.time }}
      <span class="system-info-title">系统当前时间：</span>{{ time }}
    </n-card>

    <n-card title="硬件状态" class='mt15' :bordered="false">
      <n-grid x-gap="12" :cols="3">
        <n-gi>
          <div style="text-align: center">
            <div class='mb10'>CPU使用率</div>
            <n-tooltip>
              <template #trigger>
                <n-progress type="circle" :percentage="Number(cpuInfo.usage)"></n-progress>
              </template>
              <div>
                <div>{{ cpuInfo.name }}</div>
                <div>{{ cpuInfo.package }}</div>
                <div>{{ cpuInfo.core }}</div>
                <div>{{ cpuInfo.logic }}</div>
              </div>
            </n-tooltip>
            <div class='mt10'>{{ cpuInfo.coreNumber }}核CPU</div>
          </div>
        </n-gi>
        <n-gi>
          <div style="text-align: center">
            <div class='mb10'>内存使用率</div>
            <n-tooltip>
              <template #trigger>
                <n-progress type="circle" :percentage="Number(memoryInfo.usage)"></n-progress>
              </template>
              <div >
                <div>总共：{{ memoryInfo.total }}</div>
                <div>已用：{{ memoryInfo.used }}</div>
                <div>剩余：{{ memoryInfo.usable }}</div>
              </div>
            </n-tooltip>
            <div class='mt10'>{{ memoryInfo.total }}</div>
          </div>
        </n-gi>
        <n-gi>
          <div style="text-align: center">
            <div class='mb10'>磁盘使用率</div>
            <n-tooltip>
              <template #trigger>
                <n-progress type="circle" :percentage="Number(diskInfo.usage)"></n-progress>
              </template>
              <div >
                <div>总共：{{ diskInfo.total }}</div>
                <div>已用：{{ diskInfo.used }}</div>
                <div>剩余：{{ diskInfo.usable }}</div>
              </div>
            </n-tooltip>
            <div class='mt10'>{{ diskInfo.total }}</div>
          </div>
        </n-gi>
      </n-grid>

      
    </n-card>

  </div>
</template>

<script lang="ts" setup>

  import { ref, getCurrentInstance, onMounted, computed, unref } from 'vue'
  import { getServer } from '@/api/monitor'

  const show = ref(false)
  const systemInfo = ref({})
  const cpuInfo = ref({})
  const diskInfo = ref({})
  const memoryInfo = ref({})
  const time = ref<any>()

  
  function getServerInfo() {
    getServer(null).then(res => {
      const { data } = res
      systemInfo.value = data.system
      cpuInfo.value = data.cpu
      diskInfo.value = data.disk
      memoryInfo.value = data.memory
      time.value = data.time
      // const time = Date.parse(data.time)
      // time.value = Date.parse(data.time)
      show.value = true

    })
  }

  onMounted(() => {
    getServerInfo()
    setInterval(() => {
      getServerInfo()
    }, 5000)
  })
</script>